<template>
  <div class="agreement-signing">
    <div class="page-header">
      <h1>签订入住协议</h1>
      <p>完善的服务协议，保障长者权益，让家属安心</p>
    </div>

    <div class="signing-content">
      <!-- 协议信息 -->
      <div class="agreement-info">
        <h2>协议信息</h2>
        <div class="info-grid">
          <div class="info-card">
            <div class="info-icon">📝</div>
            <div class="info-content">
              <h3>协议类型</h3>
              <p>长者入住服务协议</p>
            </div>
          </div>
          <div class="info-card">
            <div class="info-icon">⏱️</div>
            <div class="info-content">
              <h3>协议期限</h3>
              <p>一年（可续签）</p>
            </div>
          </div>
          <div class="info-card">
            <div class="info-icon">💰</div>
            <div class="info-content">
              <h3>费用说明</h3>
              <p>包含住宿、餐饮、基础护理服务</p>
            </div>
          </div>
          <div class="info-card">
            <div class="info-icon">🛡️</div>
            <div class="info-content">
              <h3>权益保障</h3>
              <p>完善的权益保障机制</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 协议条款 -->
      <div class="agreement-terms">
        <h2>协议条款</h2>
        <div class="terms-content">
          <div class="term-section">
            <h3>第一条 服务内容</h3>
            <p>1.1 提供24小时专业护理服务</p>
            <p>1.2 提供营养均衡的三餐饮食</p>
            <p>1.3 提供日常健康监测服务</p>
            <p>1.4 提供文化娱乐活动</p>
          </div>
          <div class="term-section">
            <h3>第二条 费用标准</h3>
            <p>2.1 住宿费：根据房间类型确定</p>
            <p>2.2 护理费：根据护理等级确定</p>
            <p>2.3 餐饮费：标准套餐费用</p>
            <p>2.4 其他费用：按实际发生收取</p>
          </div>
          <div class="term-section">
            <h3>第三条 双方权利与义务</h3>
            <p>3.1 机构应提供安全舒适的环境</p>
            <p>3.2 家属应按时支付相关费用</p>
            <p>3.3 双方应相互尊重、诚信合作</p>
            <p>3.4 及时沟通长者情况变化</p>
          </div>
          <div class="term-section">
            <h3>第四条 协议变更与终止</h3>
            <p>4.1 协议期满前30天可申请续签</p>
            <p>4.2 双方协商一致可变更协议内容</p>
            <p>4.3 符合法定条件可提前终止协议</p>
            <p>4.4 终止时应结清所有费用</p>
          </div>
        </div>
      </div>

      <!-- 签订表单 -->
      <div class="signing-form-section">
        <h2>签订协议</h2>
        <div class="signing-form">
          <el-form :model="signingForm" :rules="signingRules" ref="signingFormRef" label-width="120px">
            <!-- 长者信息 -->
            <div class="form-section">
              <h3>长者信息</h3>
              <el-form-item label="长者姓名" prop="elderName">
                <el-input v-model="signingForm.elderName" placeholder="请输入长者姓名"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="elderIdCard">
                <el-input v-model="signingForm.elderIdCard" placeholder="请输入长者身份证号码"></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="elderAge">
                <el-input-number v-model="signingForm.elderAge" :min="60" :max="120" placeholder="请输入年龄"></el-input-number>
              </el-form-item>
              <el-form-item label="健康状况" prop="healthStatus">
                <el-input
                  type="textarea"
                  v-model="signingForm.healthStatus"
                  placeholder="请描述长者的健康状况和特殊需求"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </div>

            <!-- 家属信息 -->
            <div class="form-section">
              <h3>家属信息</h3>
              <el-form-item label="家属姓名" prop="familyName">
                <el-input v-model="signingForm.familyName" placeholder="请输入家属姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="familyPhone">
                <el-input v-model="signingForm.familyPhone" placeholder="请输入家属联系电话"></el-input>
              </el-form-item>
              <el-form-item label="与长者关系" prop="relationship">
                <el-select v-model="signingForm.relationship" placeholder="请选择关系">
                  <el-option label="子女" value="子女"></el-option>
                  <el-option label="配偶" value="配偶"></el-option>
                  <el-option label="兄弟姐妹" value="兄弟姐妹"></el-option>
                  <el-option label="其他亲属" value="其他亲属"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="紧急联系人" prop="emergencyContact">
                <el-input v-model="signingForm.emergencyContact" placeholder="请输入紧急联系人姓名"></el-input>
              </el-form-item>
              <el-form-item label="紧急联系电话" prop="emergencyPhone">
                <el-input v-model="signingForm.emergencyPhone" placeholder="请输入紧急联系电话"></el-input>
              </el-form-item>
            </div>

            <!-- 入住信息 -->
            <div class="form-section">
              <h3>入住信息</h3>
              <el-form-item label="房间类型" prop="roomType">
                <el-select v-model="signingForm.roomType" placeholder="请选择房间类型">
                  <el-option label="单人间" value="单人间"></el-option>
                  <el-option label="双人间" value="双人间"></el-option>
                  <el-option label="三人间" value="三人间"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="护理等级" prop="careLevel">
                <el-select v-model="signingForm.careLevel" placeholder="请选择护理等级">
                  <el-option label="基础护理" value="基础护理"></el-option>
                  <el-option label="中级护理" value="中级护理"></el-option>
                  <el-option label="高级护理" value="高级护理"></el-option>
                  <el-option label="特级护理" value="特级护理"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="预计入住时间" prop="checkinDate">
                <el-date-picker
                  v-model="signingForm.checkinDate"
                  type="date"
                  placeholder="选择入住日期"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="特殊要求" prop="specialRequirements">
                <el-input
                  type="textarea"
                  v-model="signingForm.specialRequirements"
                  placeholder="请输入其他特殊要求"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </div>

            <!-- 协议确认 -->
            <div class="agreement-confirm">
              <el-form-item prop="agreementAccepted">
                <el-checkbox v-model="signingForm.agreementAccepted">
                  我已阅读并同意《长者入住服务协议》的所有条款
                </el-checkbox>
              </el-form-item>
              <el-form-item prop="privacyAccepted">
                <el-checkbox v-model="signingForm.privacyAccepted">
                  我已阅读并同意《隐私政策》和《个人信息保护声明》
                </el-checkbox>
              </el-form-item>
            </div>

            <!-- 操作按钮 -->
            <div class="form-actions">
              <el-form-item>
                <el-button type="primary" @click="submitAgreement" :loading="submitting" size="large">
                  {{ isReception ? '签订协议并生成家属账号' : '签订协议' }}
                </el-button>
                <el-button @click="previewAgreement" size="large">
                  预览协议
                </el-button>
                <el-button @click="resetForm" size="large">
                  重置表单
                </el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>

      <!-- 费用明细 -->
      <div class="fee-details" v-if="showFeeDetails">
        <h2>费用明细</h2>
        <div class="fee-table">
          <el-table :data="feeData" border style="width: 100%">
            <el-table-column prop="item" label="费用项目" width="200"></el-table-column>
            <el-table-column prop="standard" label="收费标准"></el-table-column>
            <el-table-column prop="amount" label="金额（元/月）" width="120"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 成功提示 -->
      <el-dialog
        v-model="successDialogVisible"
        title="协议签订成功"
        width="500px"
        :close-on-click-modal="false"
      >
        <div class="success-content">
          <div class="success-icon">✅</div>
          <h3>协议签订成功！</h3>
          <p v-if="isReception">家属账号已自动生成，相关信息已发送至家属手机。</p>
          <p>入住手续办理完成，欢迎长者入住！</p>
          <div class="success-info" v-if="isReception">
            <p><strong>家属登录账号：</strong>{{ generatedAccount.username }}</p>
            <p><strong>初始密码：</strong>{{ generatedAccount.password }}</p>
            <p><strong>负责护工：</strong>{{ generatedAccount.caregiverName }}</p>
          </div>
        </div>
        <template #footer>
          <el-button type="primary" @click="handleSuccessConfirm">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'

const route = useRoute()
const signingFormRef = ref()
const submitting = ref(false)
const successDialogVisible = ref(false)
const showFeeDetails = ref(false)

const isReception = computed(() => {
  return route.path.includes('reception')
})

const signingForm = reactive({
  elderName: '',
  elderIdCard: '',
  elderAge: null,
  healthStatus: '',
  familyName: '',
  familyPhone: '',
  relationship: '',
  emergencyContact: '',
  emergencyPhone: '',
  roomType: '',
  careLevel: '',
  checkinDate: '',
  specialRequirements: '',
  agreementAccepted: false,
  privacyAccepted: false
})

const generatedAccount = reactive({
  username: '',
  password: '',
  caregiverName: ''
})

const signingRules = {
  elderName: [
    { required: true, message: '请输入长者姓名', trigger: 'blur' }
  ],
  elderIdCard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { pattern: /^\d{17}[\dXx]$/, message: '请输入正确的身份证号码', trigger: 'blur' }
  ],
  elderAge: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  healthStatus: [
    { required: true, message: '请描述健康状况', trigger: 'blur' }
  ],
  familyName: [
    { required: true, message: '请输入家属姓名', trigger: 'blur' }
  ],
  familyPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  relationship: [
    { required: true, message: '请选择与长者的关系', trigger: 'change' }
  ],
  emergencyContact: [
    { required: true, message: '请输入紧急联系人', trigger: 'blur' }
  ],
  emergencyPhone: [
    { required: true, message: '请输入紧急联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  roomType: [
    { required: true, message: '请选择房间类型', trigger: 'change' }
  ],
  careLevel: [
    { required: true, message: '请选择护理等级', trigger: 'change' }
  ],
  checkinDate: [
    { required: true, message: '请选择入住日期', trigger: 'change' }
  ],
  agreementAccepted: [
    { required: true, message: '请阅读并同意服务协议', trigger: 'change' }
  ],
  privacyAccepted: [
    { required: true, message: '请阅读并同意隐私政策', trigger: 'change' }
  ]
}

const feeData = [
  {
    item: '住宿费',
    standard: '单人间/双人间/三人间',
    amount: '3000/2000/1500',
    remark: '包含水电、网络、保洁服务'
  },
  {
    item: '护理费',
    standard: '基础/中级/高级/特级护理',
    amount: '1000/2000/3000/5000',
    remark: '根据护理等级确定'
  },
  {
    item: '餐饮费',
    standard: '标准营养套餐',
    amount: '800',
    remark: '一日三餐，营养均衡'
  },
  {
    item: '活动费',
    standard: '文化娱乐活动',
    amount: '200',
    remark: '包含各类文体活动'
  },
  {
    item: '管理费',
    standard: '日常管理服务',
    amount: '300',
    remark: '包含日常管理维护'
  }
]

const submitAgreement = () => {
  signingFormRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      
      // 模拟协议签订过程
      setTimeout(() => {
        if (isReception.value) {
          // 前台签订时生成家属账号
          generatedAccount.username = `family_${Date.now().toString().slice(-6)}`
          generatedAccount.password = '123456'
          generatedAccount.caregiverName = '张护工'
        }
        
        successDialogVisible.value = true
        submitting.value = false
      }, 2000)
    }
  })
}

const previewAgreement = () => {
  ElMessageBox.alert('这里是协议预览内容，实际应用中应该显示完整的协议文档。', '协议预览', {
    confirmButtonText: '确定',
    customClass: 'agreement-preview-dialog'
  })
}

const resetForm = () => {
  signingFormRef.value.resetFields()
}

const handleSuccessConfirm = () => {
  successDialogVisible.value = false
  resetForm()
  ElMessage.success('协议签订流程完成！')
}

// 监听房间类型和护理等级变化，显示费用明细
watch(() => [signingForm.roomType, signingForm.careLevel], () => {
  if (signingForm.roomType && signingForm.careLevel) {
    showFeeDetails.value = true
  }
})
</script>

<style scoped>
.agreement-signing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.signing-content > div {
  margin-bottom: 40px;
  padding: 30px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.8rem;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

/* 协议信息样式 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.info-icon {
  font-size: 2rem;
}

.info-content h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.info-content p {
  margin: 0;
  color: #666;
}

/* 协议条款样式 */
.terms-content {
  display: grid;
  gap: 20px;
}

.term-section {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.term-section h3 {
  margin-bottom: 10px;
  color: #409eff;
}

.term-section p {
  margin: 5px 0;
  color: #666;
}

/* 表单样式 */
.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.agreement-confirm {
  margin: 30px 0;
  padding: 20px;
  background: #e8f4fd;
  border-radius: 8px;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
}

/* 费用明细样式 */
.fee-table {
  margin-top: 20px;
}

/* 成功对话框样式 */
.success-content {
  text-align: center;
  padding: 20px;
}

.success-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.success-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
  text-align: left;
}

.success-info p {
  margin: 5px 0;
}
</style>
